<template>
  <section>
    <!--工具条-->

    <el-col :span="24" class="toolbar">
      <el-button-group>
        <el-button type="primary" icon="el-icon-arrow-left" v-on:click="goBack">
          返回
        </el-button>
        <el-button type="primary" @click="handleAdd">新建子项目</el-button>
      </el-button-group>

    </el-col>

    <el-table :data="subProjectsList" :expand-row-keys="rowkeysarray" :row-key="getRowKeys" v-loading="listLoading" @expand-change="toggleRowExpansion">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row :gutter="14">
            <el-col :span="24">
              <div class="projectSteps">
                <!-- element步骤组件 -->
                <el-steps :active="scope.row.step" class="step" finish-status="success">
                  <el-step title="准备" description=""></el-step>
                  <el-step title="过程" description=""></el-step>
                  <el-step title="报告" description=""></el-step>
                  <el-step title="完成" description=""></el-step>
                </el-steps>
              </div>
              <el-card class="box-card">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__header subtable" width=100%>
                  <colgroup>
                    <col width="20%">
                    <col width="20%">
                    <col width="20%">
                    <col width="20%">
                    <col fixed="right" width="20%">
                  </colgroup>
                  <thead>
                    <tr>
                      <th colspan="1" rowspan="1" class=" is-leaf">工作进度</th>
                      <th colspan="1" rowspan="1" class=" is-leaf">状态</th>
                      <th colspan="1" rowspan="1" class=" is-leaf">操作人员</th>
                      <th colspan="1" rowspan="1" class=" is-leaf">操作</th>
                      <th colspan="1" rowspan="1" class=" is-leaf">确认人员</th>
                    </tr>
                  </thead>

                  <tr v-if="scope.row.step==0">
                    <td>企业基本信息</td>
                    <td>
                      <el-tag v-if="scope.row.jibenxinxistatus === 0" type="warning">未填写</el-tag>
                      <el-tag v-else-if="scope.row.jibenxinxistatus === 1" type="primary">已填写</el-tag>
                      <el-tag v-else type="success">已确认</el-tag>
                    </td>
                    <td>{{scope.row.jibenxinxioperator}}</td>
                    <td>
                      <el-button size="small" type="primary" @click="handleUsers(scope.$index, scope.row)">
                        查看
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.jibenxinxistatus === 0&&roletype==0" @click="handleUpdateStatus(scope.row,'jibenxinxistatus')">
                        确认状态
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.jibenxinxistatus === 1&&roletype==1" @click="handleUpdateStatus(scope.row,'jibenxinxistatus')">
                        确认OK
                      </el-button>
                    </td>
                    <td>{{scope.row.jibenxinxiconfirmor}}</td>
                  </tr>
                  <tr v-if="scope.row.step==0">
                    <td>验证信息</td>
                    <td>
                      <el-tag v-if="scope.row.yanzhengxinxistatus === 0" type="warning">未填写</el-tag>
                      <el-tag v-else-if="scope.row.yanzhengxinxistatus === 1" type="primary">已填写</el-tag>
                      <el-tag v-else type="success">已确认</el-tag>
                    </td>
                    <td>{{scope.row.yanzhengxinxioperator}}</td>
                    <td>
                      <el-button size="small" type="primary" @click="yzxxhandleclick(scope.$index, scope.row)">
                        查看
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.yanzhengxinxistatus === 0&&roletype==0" @click="handleUpdateStatus(scope.row,'yanzhengxinxistatus')">
                        确认状态
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.yanzhengxinxistatus === 1&&roletype==1" @click="handleUpdateStatus(scope.row,'yanzhengxinxistatus')">
                        确认OK
                      </el-button>
                    </td>

                    <td>{{scope.row.yanzhengxinxiconfirmor}}</td>
                  </tr>
                  <tr v-if="scope.row.step== 0  && scope.row.jibenxinxistatus === 2 && scope.row.yanzhengxinxistatus === 2">
                    <td>验证方案</td>
                    <td>
                    </td>
                    <td>{{scope.row.fanganoperator}}</td>
                    <td>
                      <el-button size="small" type="primary" @click="fahandleclick(scope.$index, scope.row)">
                        查看
                      </el-button>
                    </td>
                    <td></td>
                  </tr>
                  <tr v-if="scope.row.step== 1">
                    <td>验证点位图</td>
                    <td>
                      <el-tag v-if="scope.row.dianweitustatus === 0" type="warning">未上传</el-tag>
                      <el-tag v-else-if="scope.row.dianweitustatus === 1" type="primary">已上传</el-tag>
                      <el-tag v-else type="success">已确认</el-tag>
                    </td>
                    <td>{{scope.row.dianweituoperator}}</td>
                    <td>
                      <el-button size="small" type="primary" @click="dwthandleclick(scope.$index, scope.row)">
                        查看
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.dianweitustatus === 0&&roletype==0" @click="handleUpdateStatus(scope.row,'dianweitustatus')">
                        填写完成
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.dianweitustatus === 1&&roletype==1" @click="handleUpdateStatus(scope.row,'dianweitustatus')">
                        确认OK
                      </el-button>
                    </td>
                    <td>{{scope.row.dianweituconfirmor}}</td>
                  </tr>

                  <tr v-if="scope.row.step == 1">
                    <td>现场验证工作</td>
                    <td>
                      <el-tag v-if="scope.row.xianchangyanzhengstatus=== 0" type="warning">未完成</el-tag>
                      <el-tag v-else-if="scope.row.xianchangyanzhengstatus=== 1" type="primary">已完成</el-tag>
                      <el-tag v-else type="success">已确认</el-tag>
                    </td>
                    <td>{{scope.row.xianchangyanzhengoperator}}</td>
                    <td>
                      <el-button size="small" type="primary" @click="xcyzgzhandleclick(scope.$index, scope.row)">
                        查看
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.xianchangyanzhengstatus === 0&&roletype==0" @click="handleUpdateStatus(scope.row,'xianchangyanzhengstatus')">
                        确认状态
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.xianchangyanzhengstatus === 1&&roletype==1" @click="handleUpdateStatus(scope.row,'xianchangyanzhengstatus')">
                        确认OK
                      </el-button>
                    </td>
                    <td>{{scope.row.xianchangyanzhengconfirmor}}</td>
                  </tr>
                  <tr v-if="scope.row.step== 1">
                    <td>验证原始数据上传</td>
                    <td>
                      <el-tag v-if="scope.row.shenhewendangstatus === 0" type="warning">未审核</el-tag>
                      <el-tag v-else-if="scope.row.shenhewendangstatus === 1" type="primary">已审核</el-tag>
                      <el-tag v-else type="success">已确认</el-tag>
                    </td>
                    <td>{{scope.row.shenhewendangoperator}}</td>
                    <td>
                      <el-button size="small" type="primary" @click="shujudhandleclick(scope.$index, scope.row)">
                        查看
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.shenhewendangstatus === 0 && roletype==0" @click="handleUpdateStatus(scope.row,'shenhewendangstatus')">
                        确认状态
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.shenhewendangstatus === 1 && roletype==1" @click="handleUpdateStatus(scope.row,'shenhewendangstatus')">
                        确认OK
                      </el-button>
                    </td>
                    <td>{{scope.row.shenhewendangconfirmor}}</td>
                  </tr>
                  <tr v-if=" scope.row.step == 2 && scope.row.dianweitustatus === 2 && scope.row.xianchangyanzhengstatus === 2">
                    <td>验证报告</td>
                    <td>
                      <el-tag v-if="scope.row.yanzhengbaogaostatus === 0" type="warning">未提交</el-tag>
                      <el-tag v-else-if="scope.row.yanzhengbaogaostatus === 1" type="primary">已提交</el-tag>
                      <el-tag v-else type="success">已确认</el-tag>
                    </td>
                    <td>{{scope.row.yanzhengbaogaooperator}}</td>
                    <td>
                      <el-button size="small" type="primary" @click="bghandleclick(scope.$index, scope.row)">
                        查看
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.yanzhengbaogaostatus === 0&&roletype==0" @click="handleUpdateStatus(scope.row,'yanzhengbaogaostatus')">
                        确认状态
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.yanzhengbaogaostatus === 1&&roletype==1" @click="handleUpdateStatus(scope.row,'yanzhengbaogaostatus')">
                        确认OK
                      </el-button>
                    </td>
                    <td>{{scope.row.yanzhengbaogaoconfirmor}}</td>
                  </tr>
                  <!-- <tr v-if="scope.row.xianchangShow">
                    <td>纸质验证文档</td>
                    <td>
                      <el-tag v-if="scope.row.dijiaowendangstatus === 0" type="warning">未递交</el-tag>
                      <el-tag v-else-if="scope.row.dijiaowendangstatus === 1" type="primary">已递交</el-tag>
                      <el-tag v-else type="success">已确认</el-tag>
                    </td>
                    <td>{{scope.row.dijiaowendangoperator}}</td>
                    <td>
                      <el-button size="small" type="primary" @click="zzwdhandleclick(scope.$index, scope.row)">
                        查看
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.dijiaowendangstatus === 0 && roletype==0" @click="handleUpdateStatus(scope.row,'dijiaowendangstatus')">
                        确认状态
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.dijiaowendangstatus === 1 && roletype==1" @click="handleUpdateStatus(scope.row,'dijiaowendangstatus')">
                        确认OK
                      </el-button>
                    </td>
                    <td>{{scope.row.dijiaowendangconfirmor}}</td>
                  </tr> -->
                  <!-- <tr v-if="scope.row.xianchangShow">
                    <td>纸质验证文档</td>
                    <td>
                      <el-tag v-if="scope.row.shenhewendangstatus === 0" type="warning">未审核</el-tag>
                      <el-tag v-else-if="scope.row.shenhewendangstatus === 1" type="primary">已审核</el-tag>
                      <el-tag v-else type="success">已确认</el-tag>
                    </td>
                    <td>{{scope.row.shenhewendangoperator}}</td>
                    <td>
                      <el-button size="small" type="primary" @click="zzwdhandleclick(scope.$index, scope.row)">
                        查看
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.shenhewendangstatus === 0 && roletype==0" @click="handleUpdateStatus(scope.row,'shenhewendangstatus')">
                        确认状态
                      </el-button>
                      <el-button size="small" type="warning" v-if="scope.row.shenhewendangstatus === 1 && roletype==1" @click="handleUpdateStatus(scope.row,'shenhewendangstatus')">
                        确认OK
                      </el-button>
                    </td>
                    <td>{{scope.row.shenhewendangconfirmor}}</td>
                  </tr> -->

                  <tr v-if="scope.row.step== 3">
                    <td>验证工作结束</td>
                    <td colspan="4">
                      <el-tag v-if="scope.row.finishstatus=== 0" type="warning">已完成</el-tag>
                      <el-tag v-else type="warning">未完成</el-tag>
                    </td>
                  </tr>
                </table>
              </el-card>
              <div class="stepButgroup">
                <el-button v-if="scope.row.step == 1 || scope.row.step == 2|| scope.row.step == 3" @click="preStep(scope.$index, scope.row)">上一步</el-button>
                <el-button type="primary" v-if="scope.row.step == 0 || scope.row.step == 1|| scope.row.step == 2" @click="nextStep(scope.$index, scope.row)">下一步</el-button>
                <!-- <el-button type="primary" v-if="scope.row.step == 2" @click="endStep(scope.$index, scope.row)">完成</el-button> -->
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" width="100">
      </el-table-column>
      <el-table-column prop="projectname" label="项目名称" min-width="200">
      </el-table-column>
      <el-table-column prop="projecttype" label="项目类型" min-width="150">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.projecttype === 0" type="success">冷藏车</el-tag>
          <el-tag v-else type="warning">保温箱</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">
            <i class="el-icon-edit"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--编辑项目界面-->
    <el-dialog title="编辑项目" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form label-width="100px" :model="editForm" :rules="editFormRules" ref="editForm">
        <el-form-item label="项目名称" width="100%" prop="projectname">
          <el-input v-model="editForm.projectname"></el-input>
        </el-form-item>
        <el-form-item label="项目类型" width="100%" prop="projecttype">
          <el-select v-model="editForm.projecttype" placeholder="选择项目类型" @change="selectModel" clearable>
            <el-option v-for="item in projecttypes" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--新增项目界面-->
    <el-dialog title="新增项目" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <el-form label-width="100px" :model="addForm" :rules="addFormRules" ref="addForm">
        <el-form-item label="项目名称" width="100%" prop="projectname">
          <el-input v-model="addForm.projectname"></el-input>
        </el-form-item>
        <el-form-item label="项目类型" width="100%" prop="projecttype">
          <el-select v-model="addForm.projecttype" placeholder="选择项目类型" @change="selectModel" clearable>
            <el-option v-for="item in projecttypes" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--企业基本信息状态变更-->

  </section>
</template>
<script>
import NProgress from "nprogress";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      projecttypes: [
        {
          label: "冷藏车",
          value: 0
        },
        {
          label: "保温箱",
          value: 1
        }
      ], //新增/编辑 项目类型下拉列表
      total: 0,
      page: 1,
      subProjectsList: [],
      rowkeysarray: [],
      getRowKeys(row) {
        return row.id;
      },
      listLoading: false,
      editLoading: false,
      editFormVisible: false, //编辑界面是否显示

      editForm: {
        projectname: "",
        projecttype: ""
      },
      editFormRules: {
        projectname: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur"
          }
        ],
        projecttype: [
          {
            required: true,
            message: "请选择项目类型",
            trigger: "change"
          }
        ]
      },
      addLoading: false,
      addFormVisible: false, //新增界面是否显示

      addForm: {
        projectname: "",
        projecttype: ""
      },
      addFormRules: {
        projectname: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur"
          }
        ],
        projecttype: [
          {
            required: true,
            message: "请选择项目类型",
            trigger: "change"
          }
        ]
      },
      groupid: this.$route.params.groupid
    };
  },
  computed: {
    ...mapGetters(["roletype"])
  },
  methods: {
    //返回
    goBack() {
      this.$router.push("/Project/Projects");
    },
    // 步骤
    preStep(index, row) {
      if (row.step-- < 0) row.step = 0;
      // todo update step to db
      let params = { id: row.id, step: row.step };
      this.axios.post("/projects/update", params);
    },
    nextStep(index, row) {
      if (row.step++ > 3) row.step = 0;
      // todo update step to db
      let params = { id: row.id, step: row.step };
      this.axios.post("/projects/update", params);
    },
    endStep(row) {
      // console.log(row.step);
    },

    toggleRowExpansion(row, expanded) {
      let rowkeys = this.rowkeysarray;

      let ind = rowkeys.indexOf(row.id);
      if (ind < 0) {
        this.rowkeysarray = [];
        this.rowkeysarray.push(row.id);
      } else {
        rowkeys.splice(ind, 1);
        this.rowkeysarray = rowkeys;
      }
      localStorage.setItem(
        "expend_row_keys",
        JSON.stringify(this.rowkeysarray)
      );
    },

    // 更改状态
    handleUpdateStatus(row, key) {
      // 0:管理员，1:用户
      this.roletype == 0 ? (status = 1) : (status = 2);
      let params = { id: row.id };
      params[key] = status;

      this.axios.post("/projects/update", params).then(_ => {
        row[key] == 0 ? (row[key] = 1) : (row[key] = 2);
      });
    },

    selectModel(index) {
      Object.assign(this.addForm, this.projecttypes[index]);
    },

    handleCurrentChange(val) {
      this.page = val;
      this.getSubProjects();
    },
    //获取子项目列表
    getSubProjects() {
      this.listLoading = true;
      NProgress.start();
      this.axios
        .get("/projects", {
          params: {
            page: this.page,
            pagesize: 10,
            groupid: this.groupid
          }
        })
        .then(reply => {
          this.listLoading = false;
          NProgress.done();
          if (reply.data.status === 0) {
            this.total = reply.data.data.total;
            this.subProjectsList = [];
            reply.data.data.list.forEach(child => {
              this.subProjectsList.push({ ...child });
            });
            this.rowkeysarray = JSON.parse(
              localStorage.getItem("expend_row_keys") || "[]"
            );
          } else {
            this.$message({
              message: `查询出错，错误码${reply.data.status},请联系管理员`,
              type: "warning"
            });
          }
        });
    },
    //显示编辑子项目
    handleEdit(index, row) {
      this.editFormVisible = true;
      this.editForm = Object.assign(this.editForm, row);
    },
    //显示新建子项目
    handleAdd() {
      this.addFormVisible = true;
      this.addForm = {
        projectname: "",
        projecttype: ""
      };
    },

    //编辑项目组
    editSubmit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            NProgress.start();
            let params = {};
            Object.assign(params, this.editForm);
            Object.assign(params, {
              groupid: this.groupid
            });
            this.axios.post("/projects/update", params).then(reply => {
              this.editLoading = false;
              NProgress.done();
              if (reply.data.status === 0) {
                this.$notify({
                  title: "成功",
                  message: "编辑成功",
                  type: "success"
                });
                this.$refs["editForm"].resetFields();
                this.editFormVisible = false;
                this.getSubProjects();
              } else {
                this.$message({
                  message: `保存失败，错误码${reply.data.status},请联系管理员`,
                  type: "warning"
                });
              }
            });
          });
        }
      });
    },

    //新增项目组
    addSubmit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {
            type: "warning"
          }).then(() => {
            this.addLoading = true;
            NProgress.start();
            let params = {
              groupid: this.groupid
            };
            Object.assign(params, this.addForm);
            this.axios.post("/projects", params).then(reply => {
              this.addLoading = false;
              NProgress.done();
              this.$refs["addForm"].resetFields();
              this.addFormVisible = false;
              this.getSubProjects();
              if (reply.data.status === 0) {
                this.$notify({
                  title: "成功",
                  message: "新增成功",
                  type: "success"
                });
              } else {
                //.log(JSON.stringify(reply.data));
                this.$message({
                  message: `保存出错，错误码${reply.data.status},请联系管理员`,
                  type: "warning"
                });
              }
            });
          });
        }
      });
    },
    //查看企业基本信息
    handleUsers(index, row) {
      console.log(row);
      this.$router.push({
        path: "ProjectsUsers/" + row.groupid
      });
    },
    yzxxhandleclick(index, row) {
      if (row.projecttype == 0) {
        this.$router.push({
          path: "LccInformation/" + row.id
        });
      } else if (row.projecttype == 1) {
        this.$router.push({
          path: "BoxInformation/" + row.id
        });
      }
    },
    //查看验证报告
    bghandleclick(index, row) {
      this.$router.push({
        path: "baogaoUpdate/" + row.id
      });
    },
    //查看点位图
    dwthandleclick(index, row) {
      if (row.projecttype == 0) {
        this.$router.push({
          path: "LccDianweituUpdate/" + row.id
        });
      } else if (row.projecttype == 1) {
        this.$router.push({
          path: "BoxDianweituUpdate/" + row.id
        });
      }
    },
    //查看验证方案
    fahandleclick(index, row) {
      this.$router.push({
        path: "fanganUpdate/" + row.id
      });
    },
    //查看现场验证工作
    xcyzgzhandleclick(index, row) {
      this.$router.push({
        path: "gongzuoUpdate/" + row.id
      });
    },
    //查看纸质文档
    zzwdhandleclick(index, row) {
      this.$router.push({
        path: "wendangUpdate/" + row.id
      });
    },
    handleclick(index, row) {},
    shujudhandleclick(index, row) {
      this.$router.push({
        path: "yuanshishujuUpdate/" + row.id
      });
    }
  },

  mounted() {
    this.getSubProjects();
  }
};
</script>
<style>
.projectSteps {
  width: 75%;
  margin: 20px auto;
}
.stepButgroup {
  text-align: center;
  margin: 20px auto;
}
.subtable thead {
  color: #909399;
  font-weight: 500;
}
.subtable td,
.subtable th .is-leaf {
  border-bottom: 1px solid #ebeef5;
}
.subtable th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}
</style>
